<template>
  <div class="tab-wrapper">
    <router-link v-for="(item, index) of router"
                :key="index"
                tag="div"
                :to="item.url"
                border-radius
                class="router-item">{{ item.content }}</router-link>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      router: [
        {
          url: '/home/untreated',
          content: '未处理'
        },
        {
          url: '/home/consumed',
          content: '已处理'
        }
      ]
    }
  },
  created () {
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.tab-wrapper
  width 592px
  margin 0 auto 20px
  display flex

  .router-item
    flex 1
    text-align center
    height 58px
    line-height 60px
    color $primary
    font-size $home_size
    &:nth-of-type(1)
      border-radius 29px 0px 0px 29px
    &:nth-last-of-type(1)
      border-radius 0px 29px 29px 0px
  [border-radius]
    &:nth-of-type(1)
      &::before
        border-color $primary
        border-radius 60px 0px 0px 60px
    &:nth-last-of-type(1)
      &::before
        border-color $primary
        border-radius 0px 60px 60px 0px
  .router-link-active
    background-color $primary
    color $common_bgc
</style>
